<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title: string
  value: string | null
  unit: string
  iconClass: string
  colorClass: string
  isAlarm: boolean // 新增属性
}>()

const displayValue = computed(() => props.value || '--')
const cardClass = computed(() => props.isAlarm ? 'bg-danger' : '') // 根据 isAlarm 属性设置卡片颜色
</script>

<template>
  <div class="card data-card shadow-sm" :class="cardClass"> <!-- 添加 :class 绑定 -->
    <div class="card-body text-center">
      <i :class="['bi', iconClass, 'fs-1', colorClass]"></i>
      <h2 class="my-3">{{ title }}</h2>
      <div class="value-display">
        <span>{{ displayValue }}</span>
        <span class="unit">{{ unit }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.data-card {
  transition: transform 0.3s;
  cursor: pointer;
}
.data-card:hover {
  transform: translateY(-5px);
}
.value-display {
  font-size: 2.5rem;
  font-weight: 300;
}
.unit {
  font-size: 1.2rem;
  color: #6c757d;
}
.error-message {
  font-size: 1rem;
}
</style>